<template>
	<view class="shareBox">
		<view class="status_0" v-if="!shareStatus">
			<view class="shareTitle">
				<view class="name">
					<text>分享的标题</text>
				</view>
				<view class="input">
					<u--input
					    placeholder="请输入分享标题"
					    border="none"
					    v-model="shareData.title"
					  ></u--input>
				</view>
			</view>
			
			<view class="shareCover">
				<view class="name">
					<text>选择分享封面</text>
				</view>
				<view class="input">
					<u-scroll-list :indicator="false">
						<view class="cover" 
						:class="{active:index==curCover}" 
						@click="curCover=index;shareData.cover = item.url" 
						v-for="(item, index) in shareCoverList" :key="index">
							<u--image showLoading :src="item.cover" width="180rpx" height="144rpx"></u--image>
						</view>
					</u-scroll-list>
				</view>
			</view>
			
			<view class="shareTime">
				<view class="name">
					<text>选择分享时常</text>
				</view>
				<view class="input">
					<u-radio-group v-model="shareData.time">
						<u-radio
							shape="square"
							activeColor="#ff5d50"
							v-for="(item, index) in timeList" :key="index"
							:name="item.time"
							:disabled="item.disabled"
							:label="item.name"
							style
						>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			
			<view class="shareBtn u-f-ajc">
				<u-button shape="circle" :loading="shareLoading" :disabled="shareData.title.length<5" @click="addShare" text="制作礼包分享" type="primary"></u-button>
			</view>
		</view>
		<view class="status_1" v-if="shareStatus">
			<view class="tis">
				<view class="code u-f-ajc" @click="copy(shareCode)">
					<text>提取码 : {{shareCode}}</text>
				</view>
				<view class="name u-f-ajc">
					<text>制作成功，快转发给好友吧</text>
				</view>
			</view>
			<view class="shareBtn u-f-ajc">
				<u-button shape="circle" @click="copy(shareCode)" openType="share" text="转发给好友" type="primary"></u-button>
			</view>
			<view class="resbtn u-f-ajc" @click="shareStatus = false">
				<text>继续制作</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入方法
	import { addNoteShare } from '@/http/api'
	
	export default {
		props:{
			nid:String,
			note:Object,
			shareCoverList:Array
		},
		data() {
			return {
				// 选中的分享封面
				curCover:0,
				// 分享数据
				shareData:{
					title:'',
					cover:'',
					time:1
				},
				// 分享结果封面
				shareCover:null,
				// 分享结果Code
				shareCode:null,
				// 分享结果状态
				shareStatus:false,
				// 分享创建状态
				shareLoading:false,
				// 分享时常选择
				timeList: [{name: '1天',time: 1},{name: '3天',time: 3},{name: '7天',time: 7},{name: '30天',time: 30}]
			}
		},
		mounted() {
			
		},
		methods:{
			// 初始化
			init(){
				setTimeout(()=>{
					if(this.shareData.title=='')this.shareData.title = '分享给您：' + this.note.title +', 快点开看看吧！'
					this.shareData.cover = this.shareCoverList[this.curCover].url
				},100)
			},
			// 创建分享
			async addShare(){
				this.shareLoading = true
				let postData = this.shareData;
				postData.id = this.nid
				
				let res = await addNoteShare(postData,()=>{
					this.shareBox = false;
					this.shareLoading = false;
				});
				
				if(res.code==1){
					this.shareStatus = true
					this.shareCode = res.data.code
					this.shareCover = res.data.cover
					this.$emit('changeShare',{
						code:res.data.code,
						cover:res.data.cover,
						title:res.data.title,
						id:res.data.share_id
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
.shareBox{
	padding: 20rpx 30rpx;
	.title{
		font-size: 32rpx;
	}
	.shareTitle{
		margin-top: 10rpx;
		.name{
			font-size: 28rpx;
			color: #c8c8c8;
		}
		.mm{
			letter-spacing: 80rpx;
			width: 400rpx;
		}
		.input{
			padding: 20rpx 0rpx;
			border-bottom: 1px solid #f5f5f5;
		}
	}
	.shareCover{
		margin-top: 30rpx;
		.name{
			font-size: 28rpx;
			color: #c8c8c8;
		}
		.input{
			margin-top: 30rpx;
			.cover{
				margin-left: 30rpx;
				background-color: #f8f8f8;
				border: 3px solid #ffffff;
				&:nth-of-type(1){
					margin-left: 0;
				}
			}
			.active{
				position: relative;
				border: 3px solid #ff5d50;
				transition: 1.5s;
				&:after{
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;
					content: '❤️';
					font-weight: bold;
					color: #ff5d50;
					text-align: center;
				}
			}
		}
	}
	.shareTime{
		margin-top: 20rpx;
		.name{
			font-size: 28rpx;
			color: #c8c8c8;
		}
		.input{
			padding: 20rpx 0;
			margin-top: 10rpx;
			.lst{
				margin-left: 40rpx!important;
				&:nth-of-type(1){
					margin-left: 0!important;
				}
			}
		}
	}
	.shareBtn{
		margin-top: 50rpx;
	}
	.tis{
		margin-top: 40rpx;
		padding: 60rpx 0;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		.code{
			color: #ff5d50;
			font-size: 42rpx;
			margin-bottom: 20rpx;
		}
		.name{
			font-size: 28rpx;
			color: #00aa7f;
		}
	}
	.resbtn{
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #999999;
		text-decoration:underline
	}
}
</style>